// 商品分类组件
<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/mangerHome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card>
      <el-row>     <!-- 添加商品分类按钮 -->
        <el-col>
          <el-button type="primary" @click="showAddGoodsDialog">添加商品分类</el-button>
        </el-col>
      </el-row>
      <!-- 表格区 selection-type复选框 expand-type展开尖括号 显示索引列 显示边框 高亮-->  
      <tree-table :data="cateList" :columns="columns" :selection-type="false"
       :expand-type="false" show-index index-text="#" border :show-row-hover="false">
       <!-- 是否生效模板列 -->
        <template slot="isok" slot-scope="scope">
          <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:lightgreen"></i>
          <i class="el-icon-error" v-else style="color:red"></i>
        </template>
        <!-- 等级模板列 -->
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
          <el-tag size="mini" type="warning" v-else>三级</el-tag>
        </template>
        <!-- 操作模板列 -->
        <template slot="option" slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteCateById(scope.row)">删除</el-button>
        </template>
      </tree-table>
      <!-- 分页区 size-change监听每页显示数据条的改变 current-change监听跳转到页数的改变-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="querInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="querInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!-- 添加商品分类弹出来的对话框 -->
    <el-dialog title="添加商品分类" :visible.sync="addGoodsDialogVisible" width="50%" @close="addGoodsDialogVisibleClose">
      <!-- 表单区 -->
      <el-form :model="addGoodsForm" :rules="addGoodsFormRRules" ref="addGoodsFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="分类名称:" prop="cat_name">
          <el-input v-model="addGoodsForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级名称:">
          <!-- 级联框  options指定数据源-->
          <el-cascader v-model="selectKeys" :options="parentCateList" expand-trigger="hover" @change="parentCateChange" :props="cascaderProps" clearable change-on-select></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addGoodsDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAddGoodsForm" >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑商品分类弹出来的对话框 -->
    <el-dialog title="编辑商品分类" :visible.sync="editDialogVisible" width="50%" @close="editDialogVisibleClose" >
      <!-- 表单区 -->
      <el-form :model="editForm" :rules="addGoodsFormRRules" ref="editFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="分类名称:" prop="cat_name">
          <el-input v-model="editForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEditForm" >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      querInfo:{   //访问后端用户数据所传参数对象
        type: 3,    //商品层级
        pagenum: 1,  //当前所在页数
        pagesize: 5  //每页显示多少条数据
      },
      total:0,     //总数据条
      cateList:[],   //保存获取到的商品分类信息的数据
      columns:[    //表格绑定的列向信息
        {   //第一列
          label:'分类名称',
          prop:'cat_name'
        },
        {   //第二列
          label:'是否有效',
          type:'template',   //指定类型 表示当前这一列是模板列
          template:'isok'    //指定模板名字
        },
        {    //第三列
          label:'等级',
          type:'template',   //指定类型 表示当前这一列是模板列
          template:'order'    //指定模板名字
        },
        {    //第四列
          label:'操作',
          type:'template',   //指定类型 表示当前这一列是模板列
          template:'option'    //指定模板名字
        },
      ],  
      addGoodsDialogVisible:false,    //添加商品分类对话框显示/隐藏
      addGoodsForm:{   //添加商品分类表单绑定的数据
        cat_pid:0 ,     //父级分类的id
        cat_name:'',   // 分类名字
        cat_level:0    // 分类等级
      },     
      addGoodsFormRRules:{    //添加商品分类表单绑定的数据验证规则
        cat_name:[
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
      },
      parentCateList:[],    //保存后台父级商品分类列表
      selectKeys:[],     //选中的父级分类的id数组
      cascaderProps:{    //指定级联选择器的配置对象
        value	:'cat_id',
        label:'cat_name',
        children:'children'
      },
      editDialogVisible:false,   //编辑对话框显示隐藏
      editForm:{     //编辑表单绑定的数据
        cat_name:'',
        cat_id:0,
      },     
    }
  },
  created() {
    this.getCateList()
  },
  methods: {
    async getCateList(){
      const {data:res} = await this.$http.get('categories',{params:this.querInfo})
      if(res.meta.status !== 200){   //请求失败
        return this.$message.error('访问后台数据失败，无法获取到商品分类列表！')
      }
      // console.log(res.data)
      // 请求成功
      this.cateList = res.data.result
      this.total = res.data.total
    },
    handleSizeChange(newSize){   //监听当pagesize每页显示多少条数据改变时
      this.querInfo.pagesize = newSize  
      this.getCateList()  //重新发送请求
    },
    handleCurrentChange(newSize){  //监听当pagenum当前显示页数号改变时
      this.querInfo.pagenum = newSize  
      this.getCateList()  //重新发送请求
    },
    showAddGoodsDialog(){   //添加商品分类按钮响应
      this.getParentCateList()    //获取父级商品分类列表
      this.addGoodsDialogVisible = true
    },
    async getParentCateList(){
      const {data:res} = await this.$http.get('categories',{params:{type:2}})
      if(res.meta.status !== 200){   //请求失败
        return this.$message.error('访问后台数据失败，无法获取到商品分类父级列表！')
      }
      console.log(res.data)
      // 请求成功
      this.parentCateList = res.data
    },
    parentCateChange(){    //父级名称选项发生改变时
      // 如果selectKeys.length大于0 说明有选择父级分类  更新添加分类绑定的表单数据addGoodsForm
      if(this.selectKeys.length > 0){
        // 取selectKeys数组中最后一项作为当前添加分类的父级分类
        this.addGoodsForm.cat_pid = this.selectKeys[this.selectKeys.length-1]
        // selectKeys数组的长度就是当前添加分类的等级
        this.addGoodsForm.cat_level = this.selectKeys.length
        // console.log(this.addGoodsForm)
        return
      }
      else{   //清空时
        this.addGoodsForm.cat_pid = 0
        this.addGoodsForm.cat_level = 0
      }
    },
    addGoodsDialogVisibleClose(){   //监听添加商品对话框的关闭
      this.$refs.addGoodsFormRef.resetFields()   //表单重置
      this.selectKeys = []    //级联选择器绑定的数据清空   
      this.addGoodsForm.cat_pid = 0  //表单绑定的数据清空
      this.addGoodsForm.cat_level = 0  //表单绑定的数据清空
    },
    saveAddGoodsForm(){   //向后台发送添加商品分类的数据
      this.$refs.addGoodsFormRef.validate(async vali=>{   //表单预验证
        if(!vali) return    //表单预验证失败 false 不进行操作
        const {data:res} = await this.$http.post('categories',this.addGoodsForm)  //发起请求
        // console.log(res)
        if(res.meta.status !== 201){    //请求失败
          return this.$message.error('访问后台数据失败，无法进行添加商品分类操作！')
        }
        // 请求成功 关闭对话框 成功消息弹窗 更新列表
        this.addGoodsDialogVisible = false 
        this.$message.success('添加商品分类成功！')
        this.getCateList()  
      })
    },
    async deleteCateById(cate){   //删除分类响应
      const confirmResult = await this.$confirm.confirm('此操作将永久删除“'+cate.cat_name+'”分类，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        // center: true
      }).catch(err => err)
      // console.log(confirmResult)
      // confirmResult的值为confirm 则是确认删除
      // confirmResult的值为cancle 则是取消删除
      if(confirmResult !== 'confirm'){
        return this.$message.info('已取消删除操作')
      }
      const {data:res} = await this.$http.delete('categories/'+ cate.cat_id)
      if(res.meta.status !== 200){   //请求失败
        return this.$message.error('访问后台数据失败，无法进行删除操作！')
      }
      // 请求成功
      this.$message.success('删除成功！')
      this.getCateList()
    },
    showEditDialog(cate){    //编辑显示对话框
      // const {data:res} = await this.$http.get('categories/' + cate.cat_id)
      // if(res.meta.status !== 200){
      //   return this.$message.error('访问后台数据失败，无法进行编辑操作！')
      // }
      this.editForm.cat_id = cate.cat_id
      this.editDialogVisible = true 
    },
    async saveEditForm(){    // 编辑分类
      const {data:res} = await this.$http.put('categories/' + this.editForm.cat_id,{cat_name:this.editForm.cat_name})
      // console.log(res)
      if(res.meta.status !== 200){
        return this.$message.error('访问后台数据失败，无法进行编辑操作！')
      }
      this.$message.success('编辑成功！')
      this.getCateList()
      this.editDialogVisible = false
    },
    editDialogVisibleClose(){   //监听编辑对话框关闭
      this.$refs.editFormRef.resetFields()   //表单重置
    }
  },
}
</script>

<style scoped>
.el-cascader{
  width:100%;
}

</style>